<template>
	<view class="modal">
		<u-popup :show="showTimeModel" :round="10" mode="bottom" :closeable="true" @close="close()" >
			<view class="model-wrapper">
				<picker-view :indicator-style="indicatorStyle" :value="value" @change="changeHandler" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
					</picker-view-column>
				</picker-view>
				
				<view class="model-btn">
					<view class="close" @tap.stop="close()">取消</view>
					<view class="confirm" @tap.stop="submit()">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default{
		props:{
			showTimeModel: {
				type: Boolean,
				default:false,
			}
		},
		data(){
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			return{
				years,
				year,
				months,
				month,
				days,
				day,
				value: [9999, month - 1, day - 1],
				indicatorStyle: `height: 50px;line-height: 50px`,
			}
		},
		mounted() {
			console.log("显示状态：",this.showTimeModel);
		},
		methods:{
			changeHandler(e) {
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day = this.days[val[2]]
			},
			submit(){
				this.$emit('showTimeFun',false,this.year,this.month);
			},
			close(){
				// this.show = false;
				this.$emit('showTimeFun',false,this.year,this.month);
			}
		},
	}
</script>

<style scoped lang="scss">
	.model{
		&-wrapper{
			height: 512upx;
			background: #FFFFFF;
			border-radius: 24upx;
		}
		&-btn{
			@include flexCenter;
			width: 100%;
			position: fixed;
			bottom: 50upx;
			z-index: 10076;
			& > view{
				padding: 18upx 0;
				text-align: center;
				width: 28%;
				margin: 0 35upx;
				border-radius: 12upx;
			}
			.close{
				font-size: 28upx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				background: #F2F2F2;
			}
			.confirm{
				font-size: 28upx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				background: $globalColor-style;
			}
		}
	}
	
	.picker-view {
		width: 100%;
		height: 350upx;
		margin-top: 20rpx;
	}
	.item {
		line-height: 100rpx;
		text-align: center;
	}
	
	/deep/ .u-icon__icon{
		color: transparent !important;
	}
</style>